import {useState, useEffect} from 'react';
import './list.css';


function Item() {

    /*
    * useEffect 包含了多个生命周期函数
    * 1. 组件的产生
    * 2. 组件的更新
    * 3. 组件的销毁
    * */
    useEffect(function () {
        console.log('组件调用时候，或者数据更新时候执行');

        return function () {
            console.log('组件销毁的时候执行');
        }
    })

    return (
        <div>
            <h2>Item组件产生了！！！</h2>
        </div>
    )
}


/**
 * 定义的函数式组件
 * 1. 首字母大写
 * 2. 返回的是一个jsx元素
 *
 * props 参数代表的调用方传递给该组件的数据
 *  并且这个参数的属性是只读的。
 * @returns {*}
 * @constructor
 */
function List(props) {
    /*注意事项：如果要让函数式组件维护自己的数据，则必须使用 useState进行处理，不然我们数据变化后，并不会导致页面的更新*/
    let [count, setCount] = useState(0);
    let [flag, setFlag] = useState(true);

    /*useEffect 是函数式组件里面的声明周期函数，如果是这样写
    * 1. 组件加载执行
    * 2. 组件的 useState管理的数据变化后，执行
    * 3. useEffect 可以调用多次
    * 4. 可以传递第二个参数，是一个数组
    *   如果数组为空，只会在组件显示的时候执行
    *   如果不为空，则里面需要写上 useState管理的数据，当其中的任何一个数据变化，则会执行。一般我们把该数组叫做依赖项目。
    *
    * */
    useEffect(function () {
        console.log('useEffect');

        return function () {
            console.log('组件销毁的时候执行');
        }
    })
    useEffect(function () {
        console.log('useEffect');
    })
    useEffect(function () {
        console.log('useEffect 执行一次');
    }, [])

    useEffect(function () {
        console.log('useEffect ', count);
    }, [count])


    console.log(props);

    function clickHandler(e, id) {
        console.log('clickHandler', e.target, id);
    }

    let {title} = props;

    /*jsx语法写的一个虚拟dom节点*/
    return (
        <div style={{color: '#f00'}}>
            <h2>我是list组件-{title}</h2>
            <hr/>
            {/*可以定义一个开关来控制 item显示与否，如果控制为不显示，则代表是销毁了，销毁后会执行 useEffect 里面函数的返回值函数 */}
            {
                flag ? <Item/> : <div>Item隐藏了</div>
            }
            <button onClick={
                () => {
                    setFlag(false)
                }

            }>点击隐藏 Item组件
            </button>
            <hr/>
            <p>{props.children}</p>
            <p>
                1. 结构 2. 样式 3.行为 4. 数据（调用方传递的 props 自己维护的 useState） 5. 生命周期函数，指的是一些特定的api 用户不需要自己定义，只需要编写好，框架自动的进行调用。
            </p>
            <h2>{count}</h2>
            {/*如果在做事件绑定的时候，有用户自定义的数据要传递，则我们可以先写一个箭头函数，然后在箭头函数里面调用用户自定义的函数即可*/}
            <button onClick={(e) => {
                clickHandler(e, 12)
                setCount(count + 1)
            }}>点击我+1
            </button>
        </div>
    )
}

export default List;
